<template>
	<div class="view">
		<Table highlight-row border 
			stripe 
			:loading="data.loading" 
			:columns="columns" 
			:data="data.data">
		</Table>
	</div>
</template>

<script>
	export default {
		props: ['data'],
		data() {
			return {
				columns: [{
					type: 'index',
					width: 80,
					fixed: 'left',
					align: 'center'
				},
				{
					title: '分组名称',
					key: 'name',
					width: 250,
					fixed: 'left',
					align: 'center'
				},
				{
					title: '类型',
					key: 'type',
					width: 250,
					fixed: 'left',
					align: 'center',
					render: (h, params) => {
						if(params.row.type == 1) {
							return '普通职业';
						} else if(params.row.type == 3) {
							return '官方用户';
						} else if(params.row.type == 2) {
							return '二级用户';
						}
					}
				},
				{
					title: '操作',
					key: 'state',
					width: 180,
					fixed: 'right',
					align: 'center',
					render: (h, params) => {
						return h('div', [
							h('Button', {
								props: {
									type: 'primary',
									size: 'small'
								},
								style: {
									marginRight: '5px'
								},
								on: {
									click: () => {
										this.clickItem('edit', params)
									}
								}
							}, '编辑'),
							h('Button', {
								props: {
									type: 'error',
									size: 'small'
								},
								on: {
									click: () => {
										this.clickItem('del', params)
									}
								}
							}, '删除')
						]);
					}
				}
			]
			}
		},
		components: {
		},
		methods: {
			clickItem(type, data) {
				this.$emit('on-action', type, data);
			}
		}
	}
</script>

<style scoped="scoped">
</style>